<template>
  <div>
    <a href="#/PageChange">切换到页面作业</a>
    <a href="#/PageHospital">切换到医院作业</a>
    <a href="#/PageMath">切换到计算页</a>
    <a href="#/PageMain">day05</a>
    <a href="#/PageDay06">day06</a>
    <a href="#/PageDay07">day07</a>
    <hr />
    <!-- exact 是否进行精确匹配 -->
    <!-- <router-link to="/" exact>VUE</router-link> -->
    <router-link to="/" >VUE</router-link>
    <router-link to="/PageChange">切换到页面作业</router-link>
    <router-link to="/PageHospital">切换到医院作业</router-link>
    <router-link to="/PageMath">切换到计算页</router-link>
    <router-link to="/PageMain">day05</router-link>
    <router-link to="/PageDay06">day06</router-link>
    <router-link to="/PageDay07">day07</router-link>
    <router-link to="/PageDay08">day08</router-link>
    <router-link to="/PageDay09">day09</router-link>
    <button @click="back">回退</button>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.go(-1);
    }
  },
};
</script>
<style lang='less' scoped>
a {
  text-decoration: none;
  border: 1px solid #ff0505;
  margin: 10px;
  color: yellow;
  background: linear-gradient(
    to right,
    #00ff7f,
    #3cb371,
    #2e8b57,
    #228b22,
    #808000,
    #b8860b
  );
}
.router-link-exact-active {
  color: red;
}
.router-link-active {
  //模糊匹配
  color: red;
}
</style>